import React from "react";
import Hello from "./component/Hello";
import World from "./component/World";
import Button from "./component/Button";

// 类组件
class App extends React.Component {
  // 组件状态方式1，写在构造函数里
  constructor() {
    super();
    // this.state = {
    //   num: 1
    // }
    this.state = {
      name: "张三",
      age: 20,
      num: 1,
    };
    // this.timer = setInterval(() => {
    //   this.setState({
    //     num : this.state.num + 1
    //   })
    //   console.log(this.state.num,'num');
    //   if(this.state.num === 10){
    //     clearInterval(this.timer);
    //   }
    // },1000)
  }

  // 组件状态方式2，不写在构造函数里
  // state = {
  //   num : 1
  // }

  // 每次触发clickHandle，num都+1 +1 +1
  clickHandle = () => {
    // 方式1，利用setState第2个参数，带来的问题是回调地狱
    // this.setState({ num: this.state.num + 1 }, () => {
    //   this.setState({ num: this.state.num + 1 }, () => {
    //     this.setState({ num: this.state.num + 1 });
    //   });
    // });

    // 方式2，给setState第1个参数传函数，该函数返回对象，该函数第1个参数是上一次的state，该函数第2个函数是props
    this.setState((cur) => ({
      num: cur.num + 1,
    }));
    this.setState((cur) => ({
      num: cur.num + 1,
    }));
    this.setState((cur) => ({
      num: cur.num + 1,
    }));
  };

  // 该方法会通过 props 的形式传递给子组件
  changeStateHandle(number) {
    console.log("我是子组件传递过来的数据:", number);
  }

  render() {
    console.log("render");
    return (
      <>
        <div>{this.state.num}</div>
        <button onClick={this.clickHandle}>+1</button>
        <Hello
          stuInfo={this.state}
          num={true}
          changeStateHandle={this.changeStateHandle}
          str="字符串1"
          str2={"字符串2"}
          num1={111}
        />
        <World content="world" />
        <Button>
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </Button>
      </>
    );
  }
}

export default App;
